<template>
  <AudioButton @customClick="handlePlayClick">
    <svg
      width="100%"
      height="100%"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 300 300"
    >
      <g>
        <polyline
          ref="poly1"
          points="140 88.3333 90,60 90,230 140,201.6666"
          fill="transparent"
          stroke="white"
          stroke-width="8"
        />
        <polyline
          ref="poly2"
          points="190,173.33333333 240,145 240,145 190,116.6666"
          fill="transparent"
          stroke="white"
          stroke-width="8"
        />
        <line
          ref="line1"
          x1="140"
          y1="88.3333"
          x2="190"
          y2="116.6666"
          stroke="white"
          stroke-width="8"
        />
        <line
          ref="line2"
          x1="140"
          y1="201.6666"
          x2="190"
          y2="173.3333"
          stroke="white"
          stroke-width="8"
        />
      </g>
    </svg>
  </AudioButton>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import AudioButton from "@/components/AudioButton.vue";
import * as d3 from "d3";

const DURATION = 300;
@Component({
  components: {
    AudioButton
  }
})
export default class PlayAudioButton extends Vue {
  @Prop({ default: true, type: Boolean })
  private canToggle?: boolean;
  private canToggleState = true;
  private get pause() {
    return this.$store.state.pause;
  }
  private set pause(v) {
    this.$store.commit("SET_PAUSE", v);
  }
  private mounted() {}
  private togglePlayState() {
    return new Promise(resolve => {
      if (this.pause) {
        this.pause = false;
        d3.select(<Element>this.$refs["line1"])
          .transition()
          .duration(DURATION)
          .attr("x1", 140)
          .attr("x2", 190)
          .attr("y1", 88.3333)
          .attr("y2", 116.6666)
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["line2"])
          .transition()
          .duration(DURATION)
          .attr("x1", 140)
          .attr("x2", 190)
          .attr("y1", 201.6666)
          .attr("y2", 173.3333)
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["poly1"])
          .transition()
          .duration(DURATION)
          .attr("points", "140 88.3333 90,60 90,230 140,201.6666")
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["poly2"])
          .transition()
          .duration(DURATION)
          .attr("points", "190,173.33333333 240,145 240,145 190,116.6666")
          .ease(d3.easeBounce)
          .end()
          .then(resolve);
      } else {
        this.pause = true;
        d3.select(<Element>this.$refs["line1"])
          .transition()
          .duration(DURATION)
          .attr("x1", 125)
          .attr("x2", 125)
          .attr("y1", 60)
          .attr("y2", 230)
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["line2"])
          .transition()
          .duration(DURATION)
          .attr("x1", 175)
          .attr("x2", 175)
          .attr("y1", 60)
          .attr("y2", 230)
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["poly1"])
          .transition()
          .duration(DURATION)
          .attr("points", "125,60 75,60 75,230 125,230")
          .ease(d3.easeBounce);
        d3.select(<Element>this.$refs["poly2"])
          .transition()
          .duration(DURATION)
          .attr("points", "175,230 225,230 225,60 175 60")
          .ease(d3.easeBounce)
          .end()
          .then(resolve);
      }
    });
  }
  private handlePlayClick() {
    if (this.canToggle) {
      if (this.canToggleState) {
        this.canToggleState = false;
        this.togglePlayState().then(() => {
          this.canToggleState = true;
          this.$emit("click");
        });
      }
    }
    this.$emit("click");
  }
}
</script>

<style lang="scss" scoped>
</style>
